<template>
  <div>当前总页数
    {{ pdfState.numPages }}
  </div>
</template>
<script setup>
import { createLoadingTask } from 'vue3-pdfjs/esm'
import { onMounted, reactive } from 'vue'
// 导入自己的文件
import pdfUrl from '@/assets/pdf/前端通关手册JavaScript.pdf'
const pdfState = reactive({
  pdfSource: {
    url: pdfUrl
  },
  // 当前页
  pageNum: 1,
  // 总页数
  numPages: 2
})
onMounted(() => {
  const loadingTask = createLoadingTask(pdfState.pdfSource.url)
  loadingTask.promise.then((pdf) => {
    pdfState.numPages = pdf.numPages
  })
})



</script>

